<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>消息中心</title>
		<link rel="stylesheet" href="css/base.css" />
		<link rel="stylesheet" href="css/all.css" />
		<link rel="stylesheet" href="css/message-center.css" />
	</head>
	<style type="text/css">
		.middles {
		    position: absolute;
		    top: 1.5rem;
		    bottom: 0;
		    overflow-y: scroll;
		    /* width: 100%; */
		    padding-top: 0rem; 
		    /* background-color: #eee; */
		}
	</style>
	<body>
		<div>
			<div class="heads">
				<span href="javascript:;" onclick="go()"><img src="img/zuojiantou.png" alt="" class="arrows"></span>
				<h1 class="titles">消息中心</h1>
			</div>
			<div class="middles">
				<!--<div class="message">
					<div class="messages">
						<span class="big">系统消息</span><span class="small">2018-10-18 02:14:20</span>
					</div>
					<div onclick="location.href='./account-capital.html'">
						<div class="message-one">
							<p class="message-two">您昨天赚取了5.20元，具体收益明细可在“账户资金”中查询，继续加油吧~</p>
						</div>
					</div>
					<div onclick="location.href='./account-capital.html'">
						<div class="message-five">
							<span class="message-three">查看详情</span><img class="message-four" src="img/jiantou.png" alt="">
						</div>
					</div>
				</div>
			 -->
			</div>
		</div>
		<script src="js/all.js"></script>
		<script src="js/jquery.js"></script>
		<script src="js/secondLevel.js"></script>
		<script src="js/x_rem.js"></script>
		<script type="text/javascript">
		 
		 //判断是否登录
			$.ajax({
				type:"post",
				url:Url+"/user/isLog",
				xhrFields:{
					withCredentials:true
				},
				data:{
						
				},
				success:((data)=>{
					console.log(data);
					if(data){
						popup("请先登录");
//						location.href="login.html";
					}
				}),
				error:((err)=>{
					console.log(err);
				})
			});
		 
		 
			//上拉加载
			//_loadIndex 为请求的页数    _loadState为请求状态  0 可以请求  1 正在请求  2 请求结束
			var _loadIndex = 1,
				_loadState = 0;

			//上拉加载调用js
			loadmore('.middles', function(data) {
				$.each(data.data.list, function(key, val) {
					$('#wrapper ul').append();
				});
			}, function() {});

			function loadmore(element, successFn) {
				$(element).on("scroll", function() {
				 ;
					//当前可视容器高度
					var _elementHeight = $(element).outerHeight(),
						//当前滚动区域高度
						_elementChildHeight = $(element).children().outerHeight(),
						//滚动条高度
						_elementScroll = $(element).scrollTop();
					//滚动区域 - 滚动条高度 > 可视高度  就是还可以滚动  表示没有滚动到底部  否则就到了底部
					if(_elementChildHeight - _elementScroll - 10 > _elementHeight) {
//						console.log('没到底')
					} else {
						//console.log('到底了')
						//当状态为0 的时候进行加载，防止重复加载
						if(_loadState == 0) {
							//状态更新为1
							_loadState = 1;
							//增加页数
							_loadIndex += 1;
							//添加正在加载loadding
							$(element).append('<p class="nowLoad">加载中...</p>');
							//请求当前页数ajax
							ajaxLoad(_loadIndex);
						}
					}
				});

			};

			//ajax请求
			function ajaxLoad(_loadIndex) {
				//更新发向服务器的数据，添加页数key值
				$.ajax({
					type: "post",
					url: Url + "/systemMessage/findPageSystemMessage",
					xhrFields: {
						withCredentials: true
					},
					data: {
						"page": _loadIndex,
						"Rows": 4
					},
					success: ((data) => {
						_loadState = 0;
						console.log(data);
						let html = "";
			
						if(data.rows == "") {
							_loadState = 1;
							$(".nowLoad").text("我也是有底线的。。。");
						}

						for(let i=0; i<data.rows.length; i++){
							var tt = new Date(data.rows[i].createTime).toLocaleString().replace(/\//g, "-");
						 
							html+=`
								<div class="message">
									<div class="messages">
										<span class="big">系统消息</span><span class="small">${tt}</span>
									</div>
									<div>
										<div class="message-one">
											<p class="message-two">${data.rows[i].body}</p>
										</div>
									</div>
									 
								</div>
							`
						}
						
						$(".middles").html(html);
	

					}),
					error: ((err) => {
						console.log(err);
					})
				});

			}

			ajaxLoad(_loadIndex);
		</script>
	</body>

</html>